<template>
  <div class="switch-demo">
    <!-- 基础用法 -->
    <h3>基础用法</h3>
    <Switch v-model="switch1" />
    当前状态：{{ switch1 }}

    <!-- 带文字和图标 -->
    <h3>带文字和图标</h3>
    <Switch
        v-model="switch2"
        on-text="开启"
        off-text="关闭"
        on-icon="fas fa-sun"
        off-icon="fas fa-moon"
    />

    <!-- 禁用状态 -->
    <h3>禁用状态</h3>
    <Switch v-model="switch3" disabled />

    <!-- 自定义尺寸 -->
    <h3>自定义尺寸</h3>
    <Switch v-model="switch4" size="large" />
    <Switch v-model="switch4" size="60px" />

    <!-- 自定义值类型 -->
    <h3>自定义值类型</h3>
    <Switch
        v-model="switch5"
        :on-value="'active'"
        :off-value="'inactive'"
    />
    当前值：{{ switch5 }}
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'

const switch1 = ref(false)
const switch2 = ref(true)
const switch3 = ref(true)
const switch4 = ref(false)
const switch5 = ref('inactive')
</script>